<template>
  <div class="page">
    <div class="hei20"></div>
    <div class="container">
      <div class="hei20"></div>
        <div class="dialog"
             key="ke">
          <div class="dialog-content">
            <mt-field label="事件名称"
                      placeholder="事件名称"
                      class="require"
                      v-model="formData.eventName"></mt-field>
            <mt-field label="发生日期"
                      placeholder="发生日期"
                      class="require"
                      readonly="readonly"
                      v-model="formData.happenDate"
                      v-lfcous="handleClickHappenDate"></mt-field>
            <mt-field label="发生地点"
                      placeholder="发生地点"
                      class="require"
                      v-model="formData.happenAddress"></mt-field>
            <mt-field label="事件规模"
                      placeholder="事件规模"
                      class="require"
                      real='eventScale'
                      v-model="formData.eventScaleName"
                      v-lfcous='handleSelectEventScale'></mt-field>
            <mt-field label="事件分类"
                      placeholder="事件分类"
                      class="require"
                      real='eventCategory1'
                      v-model="formData.eventCategoryName1"
                      v-lfcous='handleSelectCategoryName'></mt-field>
            <mt-field label=" "
                      placeholder="事件分类"
                      real='eventCategory2'
                      v-model="formData.eventCategoryName2"
                      v-lfcous='handleSelectCategoryTg'></mt-field>
            <mt-field label="涉及人数"
                      placeholder="涉及人数"
                      class="require"
                      v-model="formData.numberInvolved"></mt-field>
            <mt-field label="事件描述"
                      placeholder="事件描述"
                      type="textarea"
                      rows="3"
                      class="require"
                      v-model="formData.eventOutline"></mt-field>
            <mt-field label="涉及单位"
                      placeholder="涉及单位"
                      v-model="formData.involvedUnit"></mt-field>
            <mt-field label="主要当事人证件代码"
                      placeholder="主要当事人证件代码"
                      real='cardCode'
                      class="require PartyMember"
                      v-model="formData.cardCodeName"
                      v-lfcous='handleSelectCardCode'></mt-field>
            <mt-field label="主要当事人证件号码"
                      placeholder="主要当事人证件号码"
                      class="require PartyMember"
                      v-model="formData.cardNumber"></mt-field>
            <mt-field label="主要当事人姓名"
                      placeholder="主要当事人姓名"
                      class="require"
                      v-model="formData.partyName"></mt-field>
            <mt-field label="主要当事人性别"
                      placeholder="主要当事人性别"
                      class="require"
                      real='partyGender'
                      v-model="formData.partyGenderName"
                      v-lfcous='handleSelectPartyGender'></mt-field>
            <mt-field label="主要当事人民族"
                      placeholder="主要当事人民族"
                      real='partyNationality'
                      class="require"
                      v-model="formData.partyNationalityName"
                      v-lfcous='handleSelectPartyNationality'></mt-field>
            <mt-field label="主要当事人学历"
                      placeholder="主要当事人学历"
                      class="require"
                      real='partyEducation'
                      v-model="formData.partyEducationName"
                      v-lfcous='handleSelectPartyEducation'></mt-field>
            <mt-field label="主要当事人员类别"
                      placeholder="主要当事人员类别"
                      class="PartyMember"
                      real='partyMemberCategory'
                      v-model="formData.partyMemberCategoryName"
                      v-lfcous='handleSelectPartyMemberCategory'></mt-field>
            <mt-field label="主要当事人居住详址"
                      placeholder="主要当事人居住详址"
                      class="PartyMember require"
                      v-model="formData.partyDetailAddress"></mt-field>
            <mt-field label="化解方式"
                      placeholder="化解方式"
                      real='resolveMode1'
                      v-model="formData.resolveModeName1"
                      v-lfcous='handleSelectResolveMode'></mt-field>
            <mt-field label=" "
                      placeholder="化解方式"
                      real='resolveMode2'
                      v-model="formData.resolveModeName2"
                      v-lfcous='handleSelectResolveTg'></mt-field>
            <mt-field label="化解时限"
                      placeholder="化解时限"
                      readonly="readonly"
                      v-model="formData.resolveDeadline"
                      v-lfcous="handleClickResolve"></mt-field>
            <mt-field label="化解组织"
                      placeholder="化解组织"
                      v-model="formData.resolveOrgnization"></mt-field>
            <mt-field label="化解责任人姓名"
                      placeholder="化解责任人姓名"
                      v-model="formData.resolvePersonName"></mt-field>
            <mt-field label="化解责任人联系方式"
                      placeholder="化解责任人联系方式"
                       class="PartyMember"
                      type="tel"
                      v-model="formData.resolvePersonTel"></mt-field>
            <mt-field label="化解是否成功"
                      placeholder="化解是否成功"
                      class="require"
                      real='isResolved'
                      v-model="formData.isResolvedName"
                      v-lfcous='handleSelectisResolved'></mt-field>
            <mt-field label="化解情况"
                      placeholder="化解情况"
                      type="textarea"
                      class="require"
                      rows="3"
                      v-model="formData.resolveSituation"></mt-field>
            <mt-field label="考评日期"
                      placeholder="考评日期"
                      readonly="readonly"
                      v-model="formData.evaluationDate"
                      v-lfcous="handleClickEvaluation"></mt-field>
            <mt-field label="考评意见"
                      placeholder="考评意见"
                      type="textarea"
                      rows="3"
                      v-model="formData.evaluationOpinion"></mt-field>
            <mt-field label="纬度"
                      placeholder="纬度"
                       class="require"
                      v-model="formData.latitude"></mt-field>
            <mt-field label="经度"
                      placeholder="经度"
                       class="require"
                      v-model="formData.longitude"></mt-field>
            <div class="hei20"></div>
            <mt-button type="primary"
                      class="isDisplay"
                       @click="handleCoordinateClick"
                        >选择坐标</mt-button>
            <div class="hei20"></div>
            <mt-field label="街道"
                      placeholder="街道"
                       class="require"
                      v-model="formData.street"
                      v-lfcous='handleSelectStreet'></mt-field>
            <mt-field label="社区"
                      placeholder="社区"
                       class="require"
                      v-model="formData.rquarters"
                      v-lfcous='handleSelectRquarters'></mt-field>
            <mt-field label="网格"
                      placeholder="网格"
                       class="require"
                      v-model="formData.grid"
                      v-lfcous='handleSelectGrid'></mt-field>
            <div class="hei20"></div>
            <mt-button type="primary"
                        class="isDisplay"
                        @click="save">提交</mt-button>
            <div class="hei40"></div>
          </div>
        </div>
    </div>
    <mt-datetime-picker v-model="initDate"
                        type="date"
                        ref="dateHappenDate"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        @confirm='dateConfirm'>
    </mt-datetime-picker>
    <mt-datetime-picker v-model="initDate"
                        type="date"
                        ref="dateResolveDate"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        @confirm='dateResolveConfirm'>
    </mt-datetime-picker>
    <mt-datetime-picker v-model="initDate"
                        type="date"
                        ref="dateEvaluationDate"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        @confirm='dateEvaluationConfirm'>
    </mt-datetime-picker>

    <v-select :show='selectStreetShow'
              v-on:callbackData='callbackDataStreet'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataStreet'></v-select>
    <v-select :show='selectRquartersShow'
              v-on:callbackData='callbackDataRquarters'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataRquarters'></v-select>
    <v-select :show='selectGridShow'
              v-on:callbackData='callbackDataGrid'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultDataStreet'
              :pickData='selectDataGrid'></v-select>
    <v-select :show='selectCommunityShow'
              v-on:callbackData='callbackCommunityData'
              v-on:closeBackData='closeBackData'
              :defaultData='defaultData'
              :pickData='communityData'
              :parameter='parameter'
              :attr='attr'></v-select>
  </div>
</template>
<script>
import Lib from '@/assets/js/Lib'
import Vue from 'vue'
import { Button, DatetimePicker, Field, MessageBox } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Field.name, Field)
Vue.component(DatetimePicker.name, DatetimePicker)
import vSelect from '@/components/vSelect'
import { findBuilding, findGridTree, allDict, createContradictoryAdjustment } from '@/assets/js/ApiUtil'
import { getLabelById, formatDate } from '@/assets/js/Utils'
let page = 0
export default {
  name: 'report',
  data () {
    return {
      title: '矛盾调解上报',
      parameter: '',
      disabled: false,
      attr: '',
      parentId: '',
      queryData: {},
      dialogShow: false,
      selectShow: false,
      searchWords: '',
      selectStreetShow: false,
      selectRquartersShow: false,
      selectGridShow: false,
      selectCommunityShow: false,
      initDate: '',
      formData: {},
      unitFormData: {},
      tableData: [
      ],
      defaultDataStreet: [
        { d: 0, name: '加载中....' }
      ],
      defaultData: [
        { d: 0, name: '加载中....' }
      ],
      selectDataStreet: { data1: [{ id: 0, name: '加载中...' }] },
      selectDataRquarters: { data1: [{ id: 0, name: '加载中...' }] },
      selectDataGrid: { data1: [{ id: 0, name: '加载中...' }] },
      communityData: { data1: [{ id: 0, name: '加载中...' }] }
    }
  },
  components: {
    vSelect,
    Button,
    Field,
    DatetimePicker
  },
  mounted () {
    this.getTableData()
    this.getOptions()
    window['locationBack'] = val => {//把方法挂载到window上调用
      this.locationBack(val)
    }
  },
  methods: {
    save () {
      if (this.formData) {
        if (!this.validate(this.formData)) {
          return false
        }
        this.beforeSubmit()
        createContradictoryAdjustment(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            MessageBox({title: '提示',
              message: '添加成功',
              showCancelButton: false}).then(action => {
              this.getTableData()
              this.close()
            })
          }
        })
      }
    },
    beforeSubmit () {
      if (this.formData.eventCategory2) {
        this.formData.eventCategory = this.formData.eventCategory1 + ',' + this.formData.eventCategory2
      } else {
        this.formData.eventCategory = this.formData.eventCategory1
      }
      if (this.formData.resolveMode2) {
        this.formData.resolveMode = this.formData.resolveMode1 + ',' + this.formData.resolveMode2
      } else {
        this.formData.resolveMode = this.formData.resolveMode1
      }
      let arr = this.formData.allGridId.split(',')
      this.formData.gridId = arr[arr.length - 1]
      if (this.formData.happenDate) {
        this.formData.happenDate = this.getTimeFomate(this.formData.happenDate)
      }
      if (this.formData.evaluationDate) {
        this.formData.evaluationDate = this.getTimeFomate(this.formData.evaluationDate)
      }
      if (this.formData.resolveDeadline) {
        this.formData.resolveDeadline = this.getTimeFomate(this.formData.resolveDeadline)
      }
    },
    validate (formData) {
      if (!formData.street) {
        MessageBox('提示', '请填写街道')
        return false
      } else if (!formData.rquarters) {
        MessageBox('提示', '请填写社区')
        return false
      } else if (!formData.grid) {
        MessageBox('提示', '请填写网格')
        return false
      } else if (!formData.eventName) {
        MessageBox('提示', '请输入事件名称')
        return false
      } else if (!formData.happenDate) {
        MessageBox('提示', '请选择发生日期')
        return false
      } else if (!formData.happenAddress) {
        MessageBox('提示', '请输入发生地')
        return false
      } else if (!formData.eventScale) {
        MessageBox('提示', '选择事件规模')
        return false
      } else if (!formData.eventCategory1) {
        MessageBox('提示', '请选择事件分类')
        return false
      } else if (!formData.numberInvolved) {
        MessageBox('提示', '请输入涉及人数')
        return false
      } else if (!formData.cardCode) {
        MessageBox('提示', '请选择证件代码')
        return false
      } else if (!formData.cardNumber) {
        MessageBox('提示', '请输入证件号')
        return false
      } else if (!formData.partyName) {
        MessageBox('提示', '请输入当事人姓名')
        return false
      } else if (!formData.partyGender) {
        MessageBox('提示', '请输入当事人性别')
        return false
      } else if (!formData.partyDetailAddress) {
        MessageBox('提示', '请输入当事人详细地址')
        return false
      } else if (!formData.resolveSituation) {
        MessageBox('提示', '请输入化解情况')
        return false
      } else if (!formData.isResolved) {
        MessageBox('提示', '请选择是否成功')
        return false
      } else if (!formData.longitude) {
        MessageBox('提示', '选择经纬度')
        return false
      } else if (!formData.latitude) {
        MessageBox('提示', '选择经纬度')
        return false
      } else {
        return true
      }
    },
    getTimeFomate (value) {
      let time = (new Date(value.replace(/-/g, '/'))).getTime()
      return time
    },
    handleCoordinateClick () {
      app.getLocation()
    },
    locationBack (data) {
      console.log('内部打印：'+data)
      let obj = JSON.parse(data)
      let latitude = obj.latitude
      let longitude = obj.longitude
      let address = obj.address
      this.$set(this.formData,'latitude', latitude)
      this.$set(this.formData,'longitude', longitude)
      this.$set(this.formData,'address', address)
    },
    getTableData () {
      let param = this.queryData
      findBuilding(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
            if (this.pageData.items && this.pageData.items instanceof Array) {
              if (param.hasOwnProperty('offset')) {
                this.tableData = this.tableData.concat(this.pageData.items)
              } else {
                this.tableData = this.pageData.items
              }
            }
          }
        }
      })
    },
    getOptions () {
      findGridTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            if (data[0].children) {
              let newData = JSON.parse(JSON.stringify(data[0].children))
              newData.unshift({ 'name': '全部', 'id': -1 })
              this.parentId = data[0].id
              this.selectDataStreet = { data1: data[0].children }
              return false
            } else {
              this.selectDataStreet = { data1: [{ 'name': '没有数据', 'id': -1 }] }
            }
          }
        }
      })
    },
    getallDict (keyName) {
      allDict(keyName).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            console.log(data)
            this.communityData = { data1: data }
            return false
          }
        }
      })
    },
    close () {
      this.dialogShow = false
      this.formData = {}
      this.unitFormData = {}
    },
    handleCheckSingle (data) {
      this.disabled = true
      this.dialogShow = true
      this.formData = data.items
      let arr = this.formData.allGridId.split(',')
      this.formData.street = getLabelById(arr[1], this.selectDataStreet)
      this.formData.rquarters = getLabelById(arr[2], this.selectDataStreet)
      this.formData.grid = getLabelById(arr[3], this.selectDataStreet)
      this.getBuidingTypeName()
      this.getUnitData(this.formData.id)
      let treeArr = this.selectDataStreet.data1
      for (let i = 0; i < treeArr.length; i++) {
        if (treeArr[i].id === arr[1]) {
          this.selectDataRquarters = { data1: treeArr[i].children }
          for (let j = 0; j < treeArr[i].children.length; j++) {
            if (treeArr[i].children[j].id === arr[2]) {
              this.selectDataGrid = { data1: treeArr[i].children[j].children }
            }
          }
        }
      }
    },
    handleSelectStreet () { // 街道下拉显示
      this.selectStreetShow = true
    },
    handleSelectRquarters () { // 社区下拉显示
      this.selectRquartersShow = true
    },
    handleSelectGrid () { // 网格下拉显示
      this.selectGridShow = true
    },
    callbackDataStreet (data) { // 社区街道回调
      this.selectStreetShow = false
      this.selectDataRquarters = { data1: data.items.select1.children }
      this.formData.allGridId = ''
      this.formData.street = data.defaultData[0].name
      this.formData.streetId = data.defaultData[0].id
      this.formData.allGridId = this.parentId + ',' + this.formData.streetId
      if (data.defaultData[0].name === '加载中...') this.formData.street = ''
    },
    callbackDataRquarters (data) { // 社区回调
      this.selectRquartersShow = false
      this.selectDataGrid = { data1: data.items.select1.children }
      this.formData.rquartersId = data.defaultData[0].id
      this.formData.rquarters = data.defaultData[0].name
      this.formData.allGridId = this.parentId + ',' + this.formData.streetId + ',' + this.formData.rquartersId
      if (data.defaultData[0].name === '加载中...') this.formData.rquarters = ''
    },
    callbackDataGrid (data) { // 网格回调
      this.selectGridShow = false
      this.formData.gridId = data.defaultData[0].id
      this.formData.allGridId = this.parentId + ',' + this.formData.streetId + ',' + this.formData.rquartersId + ',' + this.formData.gridId
      this.formData.grid = data.defaultData[0].name
      if (data.defaultData[0].name === '加载中...') this.formData.grid = ''
    },
    closeBackData () { // 关闭事件
      this.selectStreetShow = false
      this.selectRquartersShow = false
      this.selectGridShow = false
      this.selectCommunityShow = false
      this.selectShow = false
    },
    handleCommonSelect () { // 通用显示事件
      this.selectShow = true
    },
    callbackData (data) {
      this.selectShow = false
      this.defaultData = data.defaultData
      this.searchWords = data.defaultData[0].name
      this.queryData = {}
      if (data.defaultData[0].id !== -1) this.queryData.likeAllGridId = data.defaultData[0].id
      if (data.defaultData[0].name === '加载中...') this.searchkey = ''
      this.getTableData()
    },
    callbackCommunityData (data) {
      console.log(data)
      this.selectCommunityShow = false
      this.formData[data.parameter] = data.defaultData[0].name
      if (data.attr) {
        if (data.defaultData[0].hasOwnProperty('code')) {
          this.formData[data.attr] = data.defaultData[0].code
        } else {
          this.formData[data.attr] = data.defaultData[0].id
        }
      }
      if (data.defaultData[0].children) {
        this.communityData = { data1: data.defaultData[0].children }
      }
    },
    handleSelectEventScale (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('事件规模')
    },
    handleSelectCategoryName (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('事件类别')
    },
    handleSelectCategoryTg (key, attr) {
      if (this.formData.eventCategory1) {
        this.selectCommunityShow = true
        this.attr = attr
        this.parameter = key
        this.selectCommunityShow = true
      } else {
        this.communityData = { data1: [] }
      }
    },
    handleSelectCardCode (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('证件代码')
    },
    handleSelectPartyGender (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('性别')
    },
    handleSelectPartyNationality (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('民族')
    },
    handleSelectPartyEducation (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('学历')
    },
    handleSelectResolveMode (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('化解方式')
    },
    handleSelectResolveTg (key, attr) {
      if (this.formData.resolveMode1) {
        this.selectCommunityShow = true
        this.attr = attr
        this.parameter = key
      } else {
        this.communityData = { data1: [] }
      }
    },
    handleSelectPartyMemberCategory (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('主要当事人人员类别')
    },
    handleSelectisResolved (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.communityData = { data1: [{ id: '0', name: '否' }, { id: '1', name: '是' }] }
    },
    handleClickImg () {

    },
    handleSelectbuildingType (key, attr) {
      this.selectCommunityShow = true
      this.attr = attr
      this.parameter = key
      this.getallDict('建筑用途')
    },
    handleClickDate () {

    },
    handleClickHappenDate () {
      this.$refs['dateHappenDate'].open()
    },
    handleClickResolve () {
      this.$refs['dateResolveDate'].open()
    },
    handleClickEvaluation () {
      this.$refs['dateEvaluationDate'].open()
    },
    dateConfirm (data) {
      this.$set(this.formData, 'happenDate', formatDate(data))
    },
    dateResolveConfirm (data) {
      this.$set(this.formData, 'resolveDeadline', formatDate(data))
    },
    dateEvaluationConfirm (data) {
      this.$set(this.formData, 'evaluationDate', formatDate(data))
    },
    hanldleLoadMore () {
      page = page + 10
      this.queryData.offset = page
      this.getTableData()
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: auto
}
.container {
  position: relative;
  z-index: 10;
  padding: 10px 10px;
}
.tableList >>> .tcellName {
  color: #fff;
}
.tableList >>> .tcellName .vertical-border {
  color: #fff;
}

.tableList >>> .vertical-border {
  border-right: none !important;
  font-size: 14px;
  color: #858585;
}
.tableList >>> .v-table-rightview {
  right: -1px; /*覆盖原有样式，解决表头最右侧有1px的间隙 */
}
.unitTable >>> .v-table-rightview {
  right: -1px; /*覆盖原有样式，解决表头最右侧有1px的间隙 */
  width: 100% !important;
}
.unitTable >>> .tcellName .vertical-border {
  color: #fff;
  font-size: 14px;
}
.v-table-class {
  z-index: 10;
}
.tableList >>> .v-table-views {
  border-left: none;
  border-right: none;
}
.unitTable >>> .v-table-views {
  font-size: 12px;
}
.moreBtn {
  width: 100%;
}
.pubWrapper {
  position: fixed;
  right: 10px;
  top: 30%;
  z-index: 11;
  text-align: center;
}
.pub-icon {
  width: 30px;
  height: 30px;
}
.pubWrapper p {
  font-size: 12px;
  color: #26a2ff;
  padding: 0;
  margin: 0;
}
.searchTop {
  background: none;
}
.searchTop >>> input {
  background: none;
}
.dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  z-index: 15;
  overflow: auto;
}
.close-btn {
  position: absolute;
  right: 10px;
  top: 13px;
}
.subBtn {
  display: block;
  width: calc(100% - 20px);
  margin: 0px auto;
}
.dialog {
  background: #fff;
}
.dialog-title {
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #d9d9d9;
}
.mint-field >>> .mint-field-core {
  font-family: "微软雅黑";
}
.dialog-content {
  padding: 0 10px;
}
.mint-field >>> .mint-cell-wrapper {
  border-bottom: 1px solid #d9d9d9;
  background-image: none;
}
.m-btn {
  text-align: center;
  font-size: 0;
}
.m-btn .mint-button {
  width: 48%;
}
.unitTitle {
  border-bottom: 1px solid #d9d9d9;
  margin: 10px 0;
  padding: 10px 0;
}
.upsrc {
  width: 140px;
  height: 140px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: Center;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
}
.isDisplay {
  width: 100%;
}
.PartyMember >>> .mint-cell-text {
  line-height: 180%;
}
</style>
